<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>替换原生滚动条实例</title>
		<meta http-equiv="keywords" content="">
	    <meta http-equiv="description" content="">
	    <!--<meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE8″>-->
	    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
	    <meta name="renderer" content="webkit">
	    <link rel="stylesheet" href="style/css/base/MyReset.css" />
	    <link rel="stylesheet" href="style/css/common/common.css" />
	    <link rel="stylesheet" href="style/css/common/main.css" />
	    <link rel="stylesheet" href="style/css/page/gdt.css" />
	</head>
	<body>
		<div class="Ct">
			<p class="marginTop20">
				<label class="fontSize14 color_3 fontWeight">类型一：简易滚动条</label>
				<label>需要引入jsScroll.js,该插件不依赖于jquery</label>
			</p>
			<div class="tableDiv marginTop">
				<table class="base_table text_align_center">
					<thead class="table_Head1">
						<td width="25%">代维公司</td>
						<td width="25%">昨日断站数</td>
						<td width="25%">未恢复断站数</td>
						<td width="25%">断站累计时长</td>
					</head>
				</table>
				<div class="tableDiv1" id="chart1Div">
					<table class="base_table text_align_center" id="left_chart1_table">
						<tbody class="table_body2">
							<tr>
								<td width="25%">广东怡创</td>
								<td width="25%">20</td>
								<td width="25%">4</td>
								<td width="25%">232</td>
							</tr>
							<tr>
								<td>西安汇成</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>网络故障接口组</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>网络故障接口组</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>网络故障接口组</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>传输网络接口组</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>建设代维接口组</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>合计</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
							<tr>
								<td>合计</td>
								<td>20</td>
								<td>4</td>
								<td>232</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<p class="marginTop20">
				<label class="fontSize14 color_3 fontWeight">类型二：css3滚动条</label>
			</p>
			<div class="box">
				<div class="scroll" id="scroll-1">
					<p>前端工程师的职责是制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
					<p>Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
					<p>Web前端开发技术包括三个要素：HTML、CSS和JavaScript。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢？对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。
Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、悬浮定位、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。</p>
					<p>
						<label class="fontSize16 color_red fontWeight">我们不是美工，拒绝。。。。。</label>
					</p>
				</div>
			</div>
			<p class="marginTop20">
				<label class="fontSize14 color_3 fontWeight">类型三：隐藏滚动条实现滚动(参考：<a href="https://www.cnblogs.com/alice626/p/6206760.html" target="_blank">https://www.cnblogs.com/alice626/p/6206760.html</a>)</label>
			</p>
			<div class="outer-container">
			    <div class="inner-container">
			        <div class="content">
			            <p>前端工程师的职责是制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
						<p>Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
						<p>Web前端开发技术包括三个要素：HTML、CSS和JavaScript。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢？对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。
	Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。
	另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、悬浮定位、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。</p>
						<p>
							<label class="fontSize16 color_red fontWeight">我们不是美工，拒绝。。。。。</label>
						</p>
			        </div>
			    </div>
			</div>
		</div>
		<script type="text/javascript" src="style/js/common/jsScroll.js" ></script>
		<script>
			jsScroll(document.getElementById('chart1Div'));
		</script>
	</body>
</html>
